<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
	<link href="//at.alicdn.com/t/c/font_4897001_zcn7u137tjb.css"/>
	
	<!-- -----------以下是播放器相关------------- -->
	<!-- Video.js核心 -->
	<link href="https://cdn.jsdelivr.net/npm/video.js@8.8.0/dist/video-js.min.css" rel="stylesheet">
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
	
	<!-- websocket相关依赖 -->
	<!--SockJS库-->
	<script src="/static/js/sockjs.min.js"></script>
	<!--Stomp.js 库-->
	<script src="/static/js/stomp.min.js"></script>
	
	<!-- -----------以下是播放器相关------------- -->
	<!-- Video.js核心 -->
	<script src="https://cdn.jsdelivr.net/npm/video.js@8.8.0/dist/video.min.js"></script>
	<!-- HLS.js -->
	<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
	
	<script>
		let socket;
		let client;
		let reconnectTimer;
		const RECONNECT_DELAY = 5000; // 重连间隔(毫秒)
		let isConnected = false;

		// 初始化连接
		function initConnection() {
			socket = new SockJS("/socket/ws");
			client = Stomp.over(socket);
			
			// 配置心跳检测(可选)
			client.heartbeat.outgoing = 20000; // 发送心跳间隔
			client.heartbeat.incoming = 0;     // 禁用接收心跳
			
			client.connect({}, onConnectSuccess, onConnectError);
		}

		// 连接成功回调
		function onConnectSuccess(frame) {
			console.log("WebSocket连接成功");
			isConnected = true;
			
			// 订阅所需的消息队列 重新订阅

			
			// 监听WebSocket断开事件
			socket.onclose = handleDisconnect;
		}

		// 连接失败回调
		function onConnectError(error) {
			console.error("连接失败:", error);
			if (!isConnected) {
				scheduleReconnect();
			}
		}

		// 处理断开连接
		function handleDisconnect(event) {
			console.log("WebSocket连接已断开", event);
			isConnected = false;
			
			// 清除可能存在的旧定时器
			if (reconnectTimer) {
				clearTimeout(reconnectTimer);
			}
			
			// 启动重连
			scheduleReconnect();
		}

		// 安排重连
		function scheduleReconnect() {
			console.log(`将在${RECONNECT_DELAY/1000}秒后尝试重连...`);
			reconnectTimer = setTimeout(initConnection, RECONNECT_DELAY);
		}

		// 初始化第一次连接
		initConnection();
	</script>
	
    <script type="module" src="/main.js"></script>
	
  </body>
</html>
